<template>
	<table class="my-table">
			<thead>
					<tr 
							class="table_th"
							:class="type==1?'tbgs':'tbg'"
							v-for="(item, index) in nameList" :key="index" >
							<th v-for="(items, indexs) in nameList" :key="indexs">{{items}}</th>
					</tr>
			</thead>
			<tbody>
					<vue3-seamless-scroll
							ref="seamlessScroll"
							:list="tableData"
							direction="up"
							:hover="true"
							:limitScrollNum="tableData.length"
							:step="step"
							:class="type==1?'seamless-warp':'seamless-warps'"
					>
							<tr class="table_td" v-for="(item, index) in tableData" :key="index">
									<!-- <td v-for="(items, indexs) in nameList" :key="indexs">开发商</td> -->
									<td>{{	item.cityName }}</td>
									<td>{{	item.xzgrdkze }}</td>
									<td>{{	item.xzgrdkzeHb }}</td>
									<td>{{	item.xzgrdkzeTb }}</td>
							</tr>
					</vue3-seamless-scroll>
			</tbody>
	</table>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted,toRaw } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 接收参数
const mapInd = ref(0);
const tableData = ref<any>([]);
const type = ref(0)
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
	mapInd: {
			type: Number,
			required: true,
	},
	type:{
		type: Number,
		required: true,
	}
});
// 监听索引变化
watchEffect(() => {
	mapInd.value = props.mapInd;
	type.value = props.type;
	tableData.value = [];
	tableData.value = props.housingSupplyStatsData.list;
});
const seamlessScroll = ref(null);
const step = ref(0);
const nameList = props.housingSupplyStatsData.name;

const calculateStep = () => {
	// 获取视口的高度
	const viewportHeight = window.innerHeight;
	tableData.value = props.housingSupplyStatsData.list;
	if (tableData.value.length > 5) {
			step.value = viewportHeight * 0.0003;
	}
};
onMounted(() => {
	calculateStep();
	window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
	window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
.table_th {
	width: 99%;
	margin: 0 auto;
	height: 33px;
	position: absolute;
	z-index: 1;
	display: flex;
	color: #fff;
	align-items: center;
	font-size: 14px;
}
.tbgs{
	background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
}
.tbg{
	background: linear-gradient( 180deg, #13A3A8 0%, rgba(19,163,168,0.6) 99%);
}
.table_th th:nth-child(1) {
	flex: 1; /* 宽度比例为1 */
}

.table_th th:nth-child(2){
	flex: 2;
}
.table_th th:nth-child(3){
	flex: 1.5; /* 宽度比例为2 */
}
.table_th th:nth-child(4){
	flex: 1.5;
}

.table_td {
	width: 99.5%;
	display: flex;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	height: 30px;
	align-items: center;
	background: #092140;
}
.table_td td:nth-child(1) {
	flex: 1; /* 宽度比例为1 */
}

.table_td td:nth-child(2){
	flex: 2;
}
.table_td td:nth-child(3){
	flex: 1.5;
}
.table_td td:nth-child(4){
	flex: 1.5; /* 宽度比例为2 */
}

.table_td td{
	text-align: center;
}
.table_td:hover{
	color:#24E0E6;
	cursor: pointer;
}
.seamless-warp {
	height: 217px;
	overflow: hidden;
}
.seamless-warp .table_td:nth-child(even) {
	background: rgba(0, 0, 0, 0);
}
.seamless-warps{
	height: 217px;
	overflow: hidden;
}
.seamless-warps .table_td:nth-child(even) {
	background: rgba(12,147,152,0.2);
}

.cl-5c {
	color: #5cc40c;
	position: relative;
	top: 0.8px;
}
.cl-c4 {
	color: #c41e0c;
}
.tb {
	position: relative;
	top: 0px;
}
</style>
